<template>
    <div class="dialoger" :class="cls" v-show="isShow">
        <div
          class="modal modal-popup active modal-dialoger"
          :style="'display:block;width:' + width"
          :class="isShow ? 'modal-in' : ''"
        >
          <div class="modal-head">
              <div class="modal-title">{{title}}</div>
              <div class="modal-tools">
                <span class="modal-close" @click="isShow = false">&times;</span>
              </div>
          </div>
          <div class="modal-body">
              <slot name="body">
                {{msg}}
              </slot>
          </div>
          <div class="modal-foot">
              <slot name="footer">
                <button type="button" class="modal-popup-btn popup-btn-cl" v-if="hasCancel" @click="cancel">取消</button>
                <button type="button" class="modal-popup-btn popup-btn-ok" @click="sure">确定</button>
              </slot>
          </div>
        </div>
        <div class="modal-overlay" :class="isShow ? 'modal-visible' : ''"></div>
    </div>
</template>

<script>
/**
 * @description 弹出框
 * @since 2019-03-06
 * @author Rid King
*/
export default {
  props: {
    title: {// 标题
      type: String,
      default: '提示'
    },
    width: {// 宽度
      type: String,
      default: '500px'
    },
    msg: {// 消息
      type: String,
      default: ''
    },
    cls: {// 类名
      type: String,
      default: ''
    },
    hasCancel: {// 是否有取消按钮
      default: true
    },
    onSure: {
      default: null
    },
    onCancel: {
      default: null
    }
  },

  data () {
    return {
      isShow: false // 是否显示
    }
  },

  methods: {
    /**
     * @function 显示
     */
    show () {
      this.isShow = true
    },

    /**
     * @function 隐藏
     */
    hide () {
      this.isShow = false
    },

    /**
     * @function 销毁
     */
    remove () {
      this.$destroy()
    },

    /**
     * @function 确定
     */
    sure () {
      this.$emit('sure')
      if (typeof this.onSure === 'function') {
        if (this.onSure() !== false) {
          this.hide()
          setTimeout(() => {
            this.$destroy()
          }, 1000)
        }
      }
    },

    /**
     * @function 取消
     */
    cancel () {
      this.isShow = false
      this.$emit('cancel')
      typeof this.onCancel === 'function' && this.onCancel()
    }
  }
}
</script>

<style lang="less">

</style>
